<template>
  <div class="header">
    <div class="header-wrap">
      <div class="favicon">
        <el-avatar class="favicon-icon" :size="50" src="/favicon.ico" @click="favicconHandler" />
        <div class="toggle" @click="collapseHandler">
          <el-icon v-if="toggle">
            <Expand />
          </el-icon>
          <el-icon v-else>
            <Fold />
          </el-icon>
        </div>
      </div>
      <h1>PVZ信息管理系统</h1>
      <el-dropdown>
        <span class="el-dropdown-link">
          <span style="padding-right: 10px;">{{userInfo.usersUname}}</span>
          <el-avatar :size="50" :src="circleUrl" />
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-switch inactive-text="夜间模式" v-model="isDark" />
            </el-dropdown-item>
            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { useDark } from '@vueuse/core'
import { logout, getUserInfo } from '../api/user'
import * as message from '../utils/message-utils'

const userInfo = getUserInfo()
const isDark = useDark()

const state = reactive({
  circleUrl: userInfo.avatarUrl,
});
const { circleUrl } = toRefs(state);

const router = useRouter()

defineProps({
  toggle: Boolean,
  collapseHandler: Function
})

const favicconHandler = () => {
  router.push('/home/index')
}

const handleLogout = () => {
  logout().then(data => {
    if (data.code == 200) {
      message.success('退出登录成功')
      router.push('/')
      setTimeout(() => {
        sessionStorage.clear()
      }, 1000);
    } else {
      message.error(data.msg)
    }
  })
}

</script>

<style scoped>
.header {
  height: 100%;
  background-color: #e7f5ff6d;
}

.header-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
}

.favicon {
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.favicon-icon {
  margin-right: 20px;
}
</style>